<template>
	<div ref="dom" class="charts chart-line" style="background-color: #f6f7fb;"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartLine',
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    text: String,
    subtext: String,
    series: Array,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    legendData: Array,
    color: {
      type: Array,
      default: () => {
        return ['#2f83e4']
      }
    }
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        console.log(val)
        this.intChart()
      }
    },
    // value(newVal,oldVal){
    //   if(newVal){
    //     this.intChart()
    //   }
    // },
    text: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    series: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    intChart () {
      var that = this
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.showLoading({
          text: 'loading',
          color: '#2D8CF0',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })
      this.$nextTick(() => {
        let value = that.value
        let xData = value.xData // 年份
        let yData = value.yData // series 序列
        // let legend = value.legend // 大学
        let legend = []
        for (let i in yData) {
          console.log('tag', yData[i])
          legend.push(yData[i].name)
        }
        let list = []
        for (let i in yData) {
          let radios = yData[i].radios
          let shows
          if (radios=='0'){
            shows = {show: false}
          } else {
            shows = {show: true}
          }
          let data = {
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            smooth: false,
            label: shows
          }
          data['name'] = yData[i].name
          data['data'] = yData[i].value
          list.push(data)
        }
        console.log(list)
        let option = {
          title: {
            top: '8%',
            text: this.text,
            left: 'center',
            textStyle: {
              color: '#333',
              fontSize: 24
            }
          },
          notMerge: true,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legend,
            orient: 'horizontal',
            x: 'center',
            y: '80%'
            // itemGap:
          },
          grid: {
            top: '20%',
            left: '10%',
            right: '10%',
            bottom: '25%',
            containLabel: true
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            y: 'center',
            right: '10px',
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xData,
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            }
          },
          series: list
        }
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, 'resize', this.resize)
      }
      )
    }
  },
  mounted () {
    this.intChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
